<template>
	<div>
		<div class="container">
			<!-- 查重入口 -->
			<el-alert
				title=""
				type="warning"
				show-icon
				:closable="false"
				style="margin-bottom: 20px"
			>
				录入客户信息之前，建议查重，以免造成您和同事之间的业务冲突！
				<el-button @click="dialogVisible = true" type="danger" size="small">
					立即查重
				</el-button>
			</el-alert>
			<!-- 查重对话框 -->
			<el-dialog title="查重" :visible.sync="dialogVisible" width="70%">
				<el-input
					v-model="nameOrPhone"
					placeholder="请输入客户姓名或电话号码，支持模糊查找"
				>
					<el-button
						@click="handleCheck"
						slot="append"
						icon="el-icon-search"
					></el-button>
				</el-input>
				<el-table :data="checkResult" style="width: 100%">
					<el-table-column prop="name" label="客户姓名"></el-table-column>
					<el-table-column prop="phone" label="联系电话"></el-table-column>
					<el-table-column
						prop="ownerUsername"
						label="报备人"
					></el-table-column>
					<el-table-column
						prop="reportToDate"
						label="报备日期"
					></el-table-column>
				</el-table>
			</el-dialog>
			<!-- 表单 -->
			<el-form ref="form" :model="customer" :rules="rules" label-width="100px">
				<el-form-item label="客户名称" prop="name">
					<el-input v-model="customer.name"></el-input>
				</el-form-item>
				<el-form-item label="性别" prop="gender">
					<el-radio-group v-model="customer.gender">
						<el-radio label="MALE">男</el-radio>
						<el-radio label="FEMALE">女</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="地址" prop="address">
					<el-input v-model="customer.address"></el-input>
				</el-form-item>
				<el-form-item label="电话" prop="phone">
					<el-input v-model="customer.phone"></el-input>
				</el-form-item>
				<el-form-item label="客户来源" prop="source">
					<select-source v-model="customer.source"></select-source>
				</el-form-item>
				<el-form-item label="客户状态" prop="state">
					<SelectState v-model="customer.state"></SelectState>
					<!-- <el-select
						v-model="customer.state"
						placeholder="请选择状态"
						style="width: 100%"
						clearable
					>
						<el-option label="意向不明" value="UNKNOWN"></el-option>
						<el-option label="有意向" value="INTENTIONAL"></el-option>
						<el-option label="已成交" value="DEALED"></el-option>
					</el-select> -->
				</el-form-item>
				<el-form-item label="最后跟进日期" prop="lastFollowUpDate">
					<el-date-picker
						v-model="customer.lastFollowUpDate"
						type="date"
						placeholder="请选择日期"
						style="width: 100%"
					></el-date-picker>
				</el-form-item>
				<el-form-item label="最后跟进情况" prop="lastFollowUpNote">
					<el-input
						type="textarea"
						v-model="customer.lastFollowUpNote"
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-button
						@click="handleSave"
						type="primary"
						icon="el-icon-circle-check"
					>
						确认无误，保存客户信息
					</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
import SelectSource from "../../components/SelectSource.vue";
import SelectState from "../../components/SelectState.vue";
export default {
	components: { SelectState, SelectSource },
	data() {
		return {
			dialogVisible: false,
			nameOrPhone: "",
			checkResult: [],
			customer: {
				gender: "FEMALE",
			},
			rules: {
				name: [{ required: true, message: "请输入客户名称", trigger: "blur" }],
				phone: [
					{ required: true, message: "请输入电话号码", trigger: "blur" },
					{
						pattern:
							"^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\\d{8}$",
						message: "请输入格式正确的电话号码",
						trigger: "blur",
					},
				],
			},
		};
	},
	methods: {
		handleCheck() {
			this.axios
				.get("/customer/check-duplicate", {
					params: { keyword: this.nameOrPhone },
				})
				.then((res) => {
					this.checkResult = res.data;
				});
		},
		handleSave() {
			// 从sessionStorage中获得当前用户的帐号，作为这个新客户的负责人
			this.customer.ownerUsername = this.$store.state.currentUser.username;
			// 发起ajax请求
			this.axios
				.post("/customer", this.customer)
				.then(() => {
					this.$message.success("数据保存成功");
				})
				.catch(() => {
					this.$message.error("数据保存失败");
				});
		},
	},
};
</script>

<style scoped></style>
